<!DOCTYPE html>
<html>
<head>
	<title>query phone number</title>
	<meta charset="utf-8">
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
	<div>
		<input id="phone-num" type="text" name="phone" value="15322037969">
		<button id="query">Greet</button>
	</div>
	<div id="info">
		<p>电话：<span id="tel"></span></p>
		<p>归属地：<span id="location"></span></p>
		<p>运营商：<span id="company"></span></p>
		<p>来源：<span id="where"></span></p>

	</div>
</body>

<script type="text/javascript">
	$(document).ready(function(){
		var IMOCC = IMOCC || {};
		IMOCC.GLOBAL = {};
		IMOCC.APPS = {};

		IMOCC.APPS.QUERYPHONE = {};
		IMOCC.APPS.QUERYPHONE.AJAXCALLBACK = function(data){
			if(data.code == 200){
				IMOCC.APPS.QUERYPHONE.SHOWINFO();
				$('#tel').text(data.tel);
				$('#location').text(data.province);
				$('#company').text(data.catName);
				$('#where').text(data.msg);
			} else {
				IMOCC.APPS.QUERYPHONE.HIDEINFO();
				console.log(data);
			}
		};

		IMOCC.APPS.QUERYPHONE.SHOWINFO = function(){
			$('#info').show();
		};
		IMOCC.APPS.QUERYPHONE.HIDEINFO = function(){
			$('#info').hide();
		}
		IMOCC.APPS.QUERYPHONE.HIDEINFO();//默认隐藏

		IMOCC.GLOBAL.AJAX = function (url,method,params,dataType,callback){
			$.ajax({
				url:url,
				type:method,
				data:params,
				dataType:dataType,
				success:callback,
				error:function(){
					alert('请求异常！');
				}
			});
		};


		$('#query').click(function(){
			var phone = $('#phone-num').val();
			if(phone.length == 11){
				IMOCC.GLOBAL.AJAX('api.php','post',{'tel':phone},'json',IMOCC.APPS.QUERYPHONE.AJAXCALLBACK);
			}else{
				alert('The iphone is err');
			}
		});

	});
</script>
</html>